import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import {
	Button,
	message,
	Popconfirm,
	Space,
	Image,
	Cascader,
	Tag,
	Divider,
	Descriptions,
} from "antd";
import Search from "antd/lib/input/Search";
import { getFollow } from "./service";
import { arrayToObject, getArray } from "phinney-toolkit";
import { DynamicFormItem } from "@/components/DynamicForm";
import axios from "axios";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	let [followList, setFollowList] = useState<any>([]);

	const getFollowList = async () => {
		const res = await getFollow({});
		!isUnMounted &&
			setFollowList(
				getArray(res?.data).map((item: any) => ({
					label: item,
					value: item,
				}))
			);
	};

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "id",
			dataIndex: "configId",
			search: false,
		},
		{
			title: "名称",
			dataIndex: "user",
			search: false,
		},

		{
			title: "渠道",
			dataIndex: "state",
			search: false,
		},
		{
			title: "场景",
			dataIndex: "scene",
			valueEnum: {
				1: "小程序",
				2: "二维码",
			},
		},
		{
			title: "联系方式",
			dataIndex: "type",
			search: false,
			valueEnum: {
				1: "单人",
				2: "多人",
			},
		},
		{
			title: "是否验证",
			dataIndex: "skipVerify",
			search: false,
		},
		{
			title: "二维码",
			dataIndex: "qrCode",
			search: false,
			render: (_, record: any) => {
				if (record.qrCode) {
					return <Image src={record.qrCode} width={100} alt="" />;
				} else {
					return <div>-</div>;
				}
			},
		},
		{
			title: "备注",
			dataIndex: "remark",
			search: false,
		},
	];

	// 表单项
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "select",
				label: "选择用户",
				name: "user",
				required: true,
				options: followList,
			},
			{
				type: "text",
				label: "渠道",
				name: "state",
				required: true,
			},
			{
				type: "select",
				label: "场景",
				name: "scene",
				required: true,
				options: [
					{
						label: "二维码",
						value: 2,
					},
				],
			},
			{
				type: "select",
				label: "联系方式",
				name: "type",
				required: true,
				options: [
					{
						label: "单人",
						value: 1,
					},
					{
						label: "多人",
						value: 2,
					},
				],
			},
			{
				type: "text",
				label: "备注",
				name: "remark",
				required: true,
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "classifyCode",
		scroll: { x: 1500 },
		columns,
		listProps: {
			url: "/wechat/list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		addProps: {
			url: "/wechat/add",
			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm);
				},
			},
			paramsHandle: ({ ...params }): any => {
				return {
					...params,
				};
			},
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getFollowList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
